import {Form,Input,Space,Button} from 'antd'
import { MobileOutlined, UserOutlined , QrcodeOutlined  } from '@ant-design/icons';
import { ChangeEvent, useEffect, useState } from 'react';
import { reg } from '@/utils/reg';
import { ShowFail } from '@/utils/message';
import {useCountDown, useRequest,useLocalStorageState} from 'ahooks'
import './phone.scss'
import { YZYzm, getToken, sentYzm } from '@/api/login';
import { history } from 'umi';

export const LoginPhone =()=>{
    const [form] = Form.useForm()
    const [disable,setDiable] = useState(false)
    const [phoneData,setPhoneData]  = useState('')
    const [toggle,setToggle] = useState(true)
    const [times,settimes] = useState<number>()
    const [calPhone, setCalPhone] = useLocalStorageState<string | null>(
        'calPhone'
    )
    const [calToken, setCalToken] = useLocalStorageState<string | null>(
        'calToken'
    )
    const [countDown] = useCountDown({
        targetDate:times,
        onEnd:()=>{
            setToggle(true)
        }
    })
    const layout = { 
        labelCol:{
            span:6,
        },
        wrapperCol:{
            span:18,
            offset:0 
        }
    }
    const itemLayout = {
        wrapperCol:{
            span:21,
            offset:2
        }
    }
    const sends = useRequest(sentYzm,{
        manual:true,
        onSuccess:(res:any)=>{
            if(res.code==200){
                ShowFail('验证码发送成功')
            }
        }
    })
    const YZ = useRequest(YZYzm,{
        manual:true,
        onSuccess:(res:any)=>{
            console.log(res);
            
            if(res.code ==200){
                getTokenApi.run(form.getFieldValue("phone"))
            }
        }
    })
    const getTokenApi = useRequest(getToken,{
        manual:true,
        onSuccess:(res:any)=>{
            if(res.code==200){
                setCalPhone(form.getFieldValue('phone'))
                setCalToken(res.token)
                history.push('/admin')
            }
        }
    })
    const startSend = ()=>{
        sends.run(form.getFieldValue('phone'))
        setToggle(false)
        settimes(Date.now()+ 120000)
    }
    const submitForm = ()=>{
        form.validateFields()
        .then((res:loginPhone)=>{
            YZ.run(form.getFieldValue('phone'),form.getFieldValue('captcha'))
        })
        .catch(err=>{
            ShowFail('校验失败')
        })
    }
    useEffect(()=>{
        if(reg.phone.test(phoneData)){
            setDiable(true)
        }else{
            setDiable(false)
        }
    },[phoneData])
    return (
        <div>
            <Form
                form={form}
                {...layout}
                name="normal_login"
                className="login-form"
            >
                <Form.Item
                    name="phone"
                    label="手机号"
                    rules={[{ required: true, message: '手机号不能为空' },{pattern:reg.phone,message:'手机号格式不正确'}]}
                >
                    <Input prefix={<MobileOutlined className="site-form-item-icon" />} onChange={(e:ChangeEvent<HTMLInputElement>)=>setPhoneData(e.target.value)} allowClear  autoComplete='true'  placeholder="请输入" />
                </Form.Item>
                <Form.Item
                    name="captcha"
                    label="验证码"
                    rules={[
                        { required: true, message: '验证码不能为空' },
                        {
                            pattern:reg.code,
                            message:'必须是4位数字'
                        }
                    ]}
                >   
                    <Space direction="horizontal">
                        <Input
                            prefix={<QrcodeOutlined className="site-form-item-icon" />} allowClear  autoComplete='true'  placeholder="请输入"
                        />
                        {
                            toggle ? 
                            <Button disabled={!disable} onClick={startSend} type="primary">
                            发送验证码
                        </Button>
                        :
                        <Button disabled style={{color:'white'}}>
                            剩余 {Math.floor(countDown/1000)} S
                        </Button>
                        }
                    </Space>
                    
                </Form.Item>
                <Form.Item {...itemLayout}> 
                <button style={{display:'block',width:'100%',height:'32px'}} onClick={submitForm} className='button'>
                        <span>登录</span>
                    </button>
                    <button style={{display:'block',width:'100%',height:'32px'}} onClick={()=>form.resetFields()} className='button'>
                        <span>重置</span>
                    </button>
                </Form.Item>
            </Form>
        </div>
    )
}